import React from 'react'
const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit'
}
class TemperatureInput  extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      temperature: ''
    }
  }
  handleChange = e => {
    const { name, value } = e.target
    this.setState({
      [name]: value
    })
  }
  render () {
    const { temperature } = this.state
    const scale = this.props.scale
    return (
      <fieldset>
        <length>Enter temperature in {scaleNames[scale]}:</length>
        <input
          value={temperature}
          name='temperature'
          onChange={this.handleChange}
        ></input>
      </fieldset>
    )
  }
}
class Calculator1 extends React.Component {
    render(){
        return (
            <div>
                <TemperatureInput scale='c'></TemperatureInput>
                <TemperatureInput scale='f'></TemperatureInput>
            </div>
        )
    }
}
export { Calculator1  }
